<template>
  <div class="box">
    <headerBox :development="development" :starts="dataObj.companyLevel" :title_name="cityName" ref="headerBox" ></headerBox>
    <div class="content">
      <div class="left">
        <iframe class="iframe1" ref="iframe1" style="width: 100%;height: 100%" :src="dataObj.cloudLink" v-if="dataObj.cloudLink ? true : false"></iframe>
        <div v-else style="height: 100%">
          <iframe  style="width: 100%;height: 100%"  :src="'http://81.68.190.172:2028/index-dae.html?url=./models'+dataObj.modelFile[0].path" v-if="dataObj.modelFile.length > 0 ? true : false"></iframe>
          <div class="leftBg" v-else-if="dataObj.imageFile.length > 0" :style="{backgroundImage: 'url('+ dataObj.imageFile[0].path+')'}">
            <img style="width: 100%;height: 100%" :src="baseUrl + dataObj.imageFile[0].path" alt="">
          </div>
        </div>
        <div class="no-data" v-else>
          <img src="../../assets/images/no-data.png" alt="">
          <p>暂无数据</p>
        </div>
        <div class="funBtns">
          <img class="back" src="../../assets/images/back.png" @click="handleBack" >
          <img class="Home" src="../../assets/images/home.png" @click="handleHome" >
        </div>
      </div>
      <div class="right">
        <div class="right-item right-item1">
          <div class="companyName" v-if="dataObj.parkName">{{dataObj.parkName}}</div>
          <div class="companyTip" v-if="dataObj.parkProfile">{{dataObj.parkProfile}}</div>

          <div class="companyName" v-if="dataObj.companyName">{{dataObj.companyName}}</div>
<!--          <div class="companyTip" v-if="dataObj.companyAddress">{{dataObj.companyAddress}}</div>-->
          <div class="companyTip" v-if="dataObj.companyProfile">{{dataObj.companyProfile}}</div>
<!--          <div class="no-data" v-if="!dataObj.parkName || dataObj.companyName">-->
<!--            <img src="../../assets/images/no-data.png" alt="">-->
<!--            <p>暂无数据</p>-->
<!--          </div>-->
          <div class="boxfoot"></div>
        </div>
        <div class="right-item right-item2">
<!--          <img :src="dataObj.banner" alt="">-->
          <img ref="bannerImg" v-if="dataObj.bannerFile.length > 0" :src="dataObj.bannerFile[0].path" alt="">
          <div class="no-data" v-else>
            <img src="../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
          <div class="boxfoot"></div>
        </div>
        <div class="right-item right-item3">
          <swiperBox ref="swiperBox" v-if="dataObj.bannerFile.length > 0" :wrapperHeight="bannerHeight" :panelWight="bannerWidth" :model="true"  :bannerList="dataObj.bannerFile" ></swiperBox>
          <div class="no-data" v-else>
            <img src="../../assets/images/no-data.png" alt="">
            <p>暂无数据</p>
          </div>
          <div class="boxfoot"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header"
import { queryMarkModel } from '@/api/system/marks'
import swiperBox from '@/components/HomePart/swiper/index'
import headerBox from '@/components/HomePart/header_top'
import { getPark } from '../../api/system/park'
export default {
  name: "model",
  props:{
    cityName:String
  },
  components:{
    Header,swiperBox,headerBox
  },
  data(){
    return{
      baseUrl:process.env.VUE_APP_BASE_API,
      dataObj :{
        //公司名称
        company_name:'',
        //公司简介
        introduction:'',
        //广告图
        banner:null,
        //轮播图
        pic_list:[],
        //当前公司Id
        marksId:null,
        //大图
        imageFile:null,
        //3D模型
        modelFile:null,
      },
      bannerHeight:null,
      bannerWidth:null,
      development:87,
      //园区 id
      parkId:null,
    }
  },
  beforeRouteEnter(to, from, next) {
    // ...
    window.document.body.style.backgroundColor = '#030D48'
    next();
  },
  async created() {
    // this.filterSimulation(this.$route.query.id)
     this.parkId = this.$route.query.parkId
    if(this.parkId){
      await this.getData1()
    }else{
      this.marksId = this.$route.query.marksId
      await this.getData()
    }
    this.bannerHeight = this.$refs.bannerImg.offsetHeight
    this.bannerWidth = this.$refs.bannerImg.offsetWidth
    this.$nextTick(()=>{
      console.log(this.bannerHeight,"this.bannerHeight")
      this.$refs.swiperBox.initSwiper()
    })
  },
  mounted() {
    // console.log(this.$refs.bannerImg.offsetHeight,"this.$refs.bannerImg.width")
  },
  methods:{
    getLevel(){
      queryMarkModel({
        markType: 'companyLevel'
      }).then(res => {
        this.starts = res.data.markValue
        console.log(res,"data.markValue")
      })
    },
    async getData1() {
      const res =  await getPark(this.parkId)
      this.dataObj = res.data

    },
    //获取相信信息
    async getData() {
      const res =  await queryMarkModel(this.marksId)
      this.dataObj = res.data
      console.log(this.dataObj,"dataObj")
    },
    handleHome(){
      this.$store.commit("map/SET_IS_CITY",false)
      this.$router.push("/map")
    },
    handleBack(){
      this.$router.go(-1)
    },
  }
}
</script>
<style scoped lang="scss">
body, html {
  height: 100%;
  background: #030D48;
  background-size: cover;
}
.funBtns{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  width: 110px;
  justify-content: space-between;
  z-index: 99999;
}
.back {
  z-index: 99999;
  color: #fff;
  line-height: 50px;
  width: 50px;
  opacity: .5;
  cursor: pointer;
}
.Home {
  z-index: 99999;
  color: #fff;
  line-height: 50px;
  width: 50px;
  cursor: pointer;
  opacity: .5;
}
.content{
  display: flex;
  height: calc(100vh - 80px);
  .left{
    flex: 6;
    //height: 100%;
    background: #4969AC;
    position: relative;
  }
  .right{
    display: flex;
    width: 8rem;
    height: 100%;
    flex-direction: column;
    margin-left: 30px;
    padding-right: 30px;

    .right-item{
      flex: 1;
      height: 33.33333%;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      border: 1px solid rgba(25, 186, 139, .17);
      background: rgba(255, 255, 255, .04);
      background-size: 100% auto;
      position: relative;
      z-index: 10;

      .boxfoot {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;

        &:before {
          position: absolute;
          width: .5rem;
          height: .5rem;
          content: "";
          border-bottom: 2px solid #02a6b5;
          bottom: 0;
          border-right: 2px solid #02a6b5;
          right: 0;
        }

        &:after {
          position: absolute;
          width: .5rem;
          height: .5rem;
          content: "";
          border-bottom: 2px solid #02a6b5;
          bottom: 0;
          border-left: 2px solid #02a6b5;
          left: 0;
        }
      }

      &:before {
        position: absolute;
        width: .5rem;
        height: .5rem;
        content: "";
        border-top: 2px solid #02a6b5;
        top: 0;
        border-left: 2px solid #02a6b5;
        left: 0;
      }

      &:after {
        position: absolute;
        width: .5rem;
        height: .5rem;
        content: "";
        border-top: 2px solid #02a6b5;
        top: 0;
        border-right: 2px solid #02a6b5;
        right: 0;
      }
    }

    .right-item1{
      display: flex;
      justify-content: start;
      padding-top: .2rem;
      .companyName{
        text-align: center;
        font-size: .5rem;
        margin-bottom: .2rem;
      }
      .companyTip{
        text-align: left;
        font-size: .25rem;
        height: 3.2rem;
        padding: 0 .3rem .2rem;
      }
    }
    .right-item2{
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: .2rem;
      margin-bottom: .2rem;
      padding: .3rem 0;
      box-sizing: border-box;
        img{
          width: 95%;
          height: 100%;
        }
    }
    .right-item3{
      display: flex;
      justify-content: center;
      padding: .3rem 0;
    }
  }
}

.no-data {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.no-data p {
  color: #fff;
  font-size: 0.28rem;
  font-weight: 400;
}

.no-data img {
  width: 40% !important;
  height: auto !important;
}
.leftBg{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
<style>
 .el-carousel__container{
    height: 5rem !important;
  }
</style>
